{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container py-5">

  <!-- Quiz title and progress -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>{{ attempt.quiz.title }}</h3>
    <span class="text-muted">Question {{ question_index|add:"1" }} of {{ total_questions }}</span>
  </div>

  {% if remaining_seconds %}
  <div class="alert alert-warning text-center fw-bold">
    ⏳ Time Remaining: <span id="timer">{{ remaining_seconds }}</span> seconds
  </div>
  {% endif %}

  <!-- Question Card -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-body">
      <h5 class="mb-3">{{ question.text }}</h5>
      <form method="post" class="mt-3">
        {% csrf_token %}
        {% for choice in choices %}
        <div class="form-check mb-2">
          <input
            class="form-check-input"
            type="radio"
            name="choice"
            id="choice{{ choice.id }}"
            value="{{ choice.id }}"
            {% if selected_choice == choice.id %}checked{% endif %}
          >
          <label class="form-check-label" for="choice{{ choice.id }}">
            {{ choice.text }}
          </label>
        </div>
        {% endfor %}

        <div class="d-flex justify-content-between mt-4">
          {% if question_index > 0 %}
            <a href="{% url 'quizzes:attempt_question' attempt.id question_index|add:'-1' %}" class="btn btn-secondary">
              ← Previous
            </a>
          {% else %}
            <button class="btn btn-secondary" disabled>← Previous</button>
          {% endif %}

          <button type="submit" class="btn btn-primary">
            {% if question_index < total_questions|add:'-1' %}
              Next →
            {% else %}
              Finish Quiz
            {% endif %}
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Progress Bar -->
  <div class="progress" style="height: 20px;">
    {% with percent=question_index|add:"1"|divisibleby:total_questions %}
    <div
      class="progress-bar bg-success"
      role="progressbar"
      style="width: {{ question_index|add:'1'|floatformat:0|divisibleby:total_questions }}%"
    ></div>
    {% endwith %}
  </div>

</div>

{% if remaining_seconds %}
<script>
  let remaining = {{ remaining_seconds }};
  const timerElement = document.getElementById('timer');

  const countdown = setInterval(() => {
    remaining--;
    if (remaining <= 0) {
      clearInterval(countdown);
      window.location.href = "{% url 'quizzes:finish_attempt' attempt.id %}";
    }
    if (timerElement) timerElement.textContent = remaining;
  }, 1000);
</script>
{% endif %}
{% endblock %}